<template>
  <div class="app-container">
    <div class="container">
    <!-- //左边为列表展示 -->
    <div class="table">
      <el-form :model="params" ref="queryRef" label-width="68px" style="display: flex; flex-wrap: wrap;" >
      <el-form-item label="考试编号" prop="examCode"  style="width: 45%;">
        <el-input
          v-model="params.examCode"
          placeholder="请输入考试编号"
          clearable
          @keyup.enter="getList"
        />
      </el-form-item>
      <el-form-item label="课程名称" prop="subject" style="width: 47%;margin-left: 20px;">
        <el-input
          v-model="params.subject"
          placeholder="请输入课程名称"
          clearable
          @keyup.enter="getList"
        />
      </el-form-item>
      <el-form-item style="margin-left: -70px;">
        <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="examList" >
      <el-table-column label="考试编号" align="center" prop="examCode" />
      <el-table-column label="考试名称" align="center" prop="examName" />
      <el-table-column label="课程名称" align="center" prop="subject" />
      <el-table-column label="平均分" align="center" prop="averageScore" />
      <el-table-column label="考试人数" align="center" prop="numberOfParticipants" />
      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width" >
        <template #default="scope">
          <el-button class="table-button" link type="primary" icon="info" @click="display(scope.row)" v-hasPermi="['module:score:edit']">图形展示</el-button>
        </template>
      </el-table-column>
    </el-table>
      <pagination
      v-show="total>0"
      :total="total"
      v-model:page="params.pageNum"
      v-model:limit="params.pageSize"
      @pagination="getList"
    />
    </div>
     <!-- 右边为e-charts图形展示 -->
    <div class="box" ref="box">我是图标</div>
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { listExam,listExamScore } from "@/api/module/score"

// 响应式数据
const isNull = ref(false)
const name = ref(null)
const loading=ref(false)
const total = ref(0)
const category = ref({
  '90分及以上': 0,
  '80-89分': 0,
  '70-79分': 0,
  '60-69分': 0,
  '60分以下': 0,
})
const box = ref(null)

const params=ref({
  pageNum:1,
  pageSize:10,
  subject:'',
  examCode:'',
})

//学生成绩列表
const scorelist=ref([])
//考试列表
const examList=ref([])

//获取考试列表
const getList=()=>{
  //获取考试列表
  //赋值给examList
  return listExam(params.value).then(res=>{
    examList.value=res.rows
    total.value=res.total
  })
}

//重置按钮
const resetQuery = () => {
  params.value = {
    pageNum: 1,
    pageSize: 10,
    subject: '',
    examCode: '',
  }
  getList()
}

//获取考试分段数据
const display=async (row)=>{
  //传入examCode和sourse
  //获取学生成绩列表
  //赋值给scorelist
   await listExamScore({examCode:row.examCode}).then(res=>{
    scorelist.value=res.data
    name.value=res.data.examName||'xx考试数据'
  })
  //重置
 category.value= {
  '90分及以上': 0,
  '80-89分': 0,
  '70-79分': 0,
  '60-69分': 0,
  '60分以下': 0,
}
  getScoreInfo()

}
//生成图形
const getScoreInfo =  () => {
      //   console.log('scorelist', scorelist)
      // console.log(scorelist.value.length)
  try {
    //分数分类
    if (scorelist.value.length > 0) {

      const chart = echarts.init(box.value)

      // 自动适配容器大小
window.addEventListener('resize', () => {
  chart.resize()
})

// 初始化后立即 resize 一次
chart.resize({
  width: '800%',   // 可选，设置具体宽度
  height: '800%'   // 可选，设置具体高度
})
      //分段
      scorelist.value.forEach((element) => {
        const score = element.etScore
        switch (Math.floor(score / 10)) {
          case 10:
          case 9:
            category.value['90分及以上']++
            break
          case 8:
            category.value['80-89分']++
            break
          case 7:
            category.value['70-79分']++
            break
          case 6:
            category.value['60-69分']++
            break
          default:
            category.value['60分以下']++
        }
      })

      const option = {
        title: {
          text: `${name.value}分数段图`,
          subtext: '分数段饼图',
          x: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}：{b} <br/> {c}人 ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['90分及以上', '80-89分', '70-79分', '60-69分', '60分以下'],
        },
        series: [
          {
            name: '分数段',
            type: 'pie',
            radius: '35%',
            center: ['50%', '35%'],
            data: Object.keys(category.value).map((key) => ({
              value: category.value[key],
              name: key,
            })),
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      chart.setOption(option)

    } else {
      isNull.value = true
    }
  } catch (error) {
    console.error('获取成绩失败:', error)
  }
}

onMounted(  () => {
    nextTick( () => {
     getList().then(()=>{
      if (examList.value.length > 0) {
      display(examList.value[0])
    }
    })   
  })

})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction:row ;
}
.table {
  width:40%;
  height: 500px;
  border-right: 1px solid gray; /* 设置左边灰色边框 */
  padding-right: 30px;
  // background-color: red;
}
.box{
  width:60%;
  margin-left: 20px;
    justify-content: center; // 水平居中
  align-items: center;     // 垂直居中
}

.query-form {
 display: flex;
}


</style>
